﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<style>
#regform{
    margin:0 auto;   
    width:375px;
    height:667px;
    background:url("images/background.jpg");
    display:inline-block;
}
#phone{
       border:none;
       outline:none;
      background:none;
      padding-left:10px;
}
#yzm{
       border:none;
    outline:none;
   
    background:none;
    padding-left:10px;
}
#pwd1{
       border:none;
    outline:none;
    
    background:none;
    padding-left:10px;
}

#pwd2{
       border:none;
    outline:none;
   
    background:none;
    padding-left:10px;
}
.A{
    margin-left:20px;
    font-size:14px;
}
.box{
    width:375px;
    height:667px;
    margin:0 auto;
}
#phoneerror,#yzmerror,#pwderror1,#pwderror2{
   font-size:12px;
}
#agreeCK{
   margin-left:20px;
    font-size:14px;
    
}
.xy{
    font-size:14px;
   text-decoration:none;  
}
.li{
       width:310px;
    height:40px;
    color:white;
    background:#000033;
    border:1px solid #999;
    border-radius:5px;
    text-align:center;
    line-height:40px;
    cursor:not-allowed;
    margin:0 auto;
    
}
#submitBtn{
   background:none;
   border:none;
   color:white;
}
.deng{
     width:310px;
    height:40px;
    color:white;
    background:#000033;
    border:1px solid #999;
    border-radius:5px;
    text-align:center;
    line-height:40px;
    cursor:not-allowed;
    margin:0 auto;
     margin-top:200px;
}
.deng a{
   color:white;
    text-decoration:none; 
}
</style>
</head>
<body>
<script src ="jquery.js"></script>
  <div class="box">  
  <form id="regform">
   <span class="span1"></span><br /><br /><br /><br />
    <input type="hidden" name="countryNo" value="86"/>
     <span class="A">手机号*  </span>
    <input placeholder ="请输入手机号码" id="phone" name="phone" autocomplete="off"/>
    <span id="phoneerror"></span>
    <br /><br />
    <span class="A">验证码*  </span>
    <input placeholder="请输入验证码" id="yzm"/>
    <span id="yzmerror"></span>
    <input type="button" value="发送验证码" id="yanzhengmaBtn" disabled/><br /><br />
    <span class="A">密 码*  </span><input placeholder="请输入密码" name="pwd" id="pwd1" title="密码长度6~16位，数字、字母和符号至少包含两种"/>
    <span id="pwderror1"></span>
    <br /><br />
    <span class="A">密 码*  </span><input placeholder="请再输入一次密码" id="pwd2"/>
    <span id="pwderror2"></span>
    <br /><br />
    <input type="checkbox" id="agreeCK"/><a class="xy" href="">注册协议</a> <br /><br />
    <div class="li"><input type ="button" id ="submitBtn" value="立即注册" disabled /></div><br /><br />
    <div class="deng"><a href ="登录.html">登录</a></div>
</form>
</div>
<script>
//手机号码正则表达式
var phoneReg =/^1[345789][0-9]{9}$/;
//验证码正则表达式
var codeReg = /^[0-9]{6}$/;
var pwdReg0 = /^.{6,16}$/;
var pwdReg1 = /[0-9]+/;
var pwdReg2 = /[a-zA-Z]+/;
var pwdReg3 = /[=~!@#\$%\^&\*\(\)\+\{\[\]\}:"\|',\<\?.\/\\]+/;
var timer;
var t=60;
//表示是否同意注册协议
var isAgree = false;
var isPhoneRight = false;
var isYZMRight = false;
var isPwd1Right = false;
var isPwd2Right = false;
//功能1：向用户提示手机号码格式是否正确
    phone.onblur = function(){
    var phoneValue = phone.value;
    if(!phoneReg.test(phoneValue)){
        phoneerror.innerHTML ="手机号码格式有误！";
        isPhoneRight = false;
    }else{
        phoneerror.innerHTML = "<img src='dui.png'/>";
        isPhoneRight =true;
    }
    checkAll();
};
//功能2：根据手机号码格式的正确性，决定是否启用验证码按钮
phone.onkeyup=function(){
    var phoneValue = phone.value;
    if(!phoneReg.test(phoneValue)){
        yanzhengmaBtn.setAttribute("disabled","disabled");
        yanzhengmaBtn.style.color="";
        isPhoneRight=false;
    }else{
        yanzhengmaBtn.removeAttribute("disabled");
        yanzhengmaBtn.style.color="red";
        isPhoneRight=true;
    }
    checkAll();
};
//功能3：发送验证码功能
//点击后要求倒计时60秒。在此期间该按钮应该禁用
    yanzhengmaBtn.onclick=function(){
    yanzhengmaBtn.setAttribute("disabled","disabled");
    yanzhengmaBtn.style.color="";
    yanzhengmaBtn.value="重新发送60";

    timer=setInterval(daojishi,1000);
    alert("验证码是  111111");
};
function daojishi(){
    t--;
    if(t==0){
        clearInterval(timer);
        yanzhengmaBtn.value="发送验证码";
       yanzhengmaBtn.removeAttribute("disabled");
       yanzhengmaBtn.style.color ="red";
       t=60;
       return;
    }
    yanzhengmaBtn.value="重新发送"+t;
}
//功能4：验证验证码的正确性
yzm.onkeyup=function(){
    var yzmValue =yzm.value;
    if(yzmValue.length==0){
        yzmerror.innerHTML="请您填写验证码！";
        isYZMRight =false;
        checkAll();
        return;
    }
    if(!codeReg.test(yzmValue)){
        yzmerror.innerHTML ="验证码格式有误！";
        isYZMRight =false;
        checkAll();
        return;
    }
$.ajax({
    url:"http://test.hfjava.com/shop/yzm",
    dataType:"jsonp",
    success:function(data){
        if(data.code!=yzmValue){
            yzmerror.innerHTML="验证码错误！";
            isYZMRight =false;
        }else{
            yzmerror.innerHTML="验证码正确！";
            isYZMRight =true;
        }
        checkAll();
    }
});
};
//功能5：密码1验证格式有效性
pwd1.onkeyup=function(){
     var pwd1Value =pwd1.value;
     var rightCount =0;
     //长度 字母 数字 符号
    var lengthValid =pwdReg0.test(pwd1Value);
    var numberValid =pwdReg1.test(pwd1Value);
    var letterValid =pwdReg2.test(pwd1Value);
    var symbolValid =pwdReg3.test(pwd1Value);

    if(numberValid){
        rightCount++;
    }
    if(letterValid){
        rightCount++;
    }
    if(symbolValid){
        rightCount++;
    }
    if(!lengthValid||rightCount<2){
        pwderror1.innerHTML="密码格式错误";
        isPwd1Right =false;
    }else{
        pwderror1.innerHTML="密码格式正确";
        isPwd1Right =true;
    }
     checkPwd2();
    checkAll();
};
//功能6：密码2验证与密码1是否一致
pwd2.onkeyup=function(){
    checkPwd2();
};
function checkPwd2(){
    var pwd1Value =pwd1.value;
    var pwd2Value =pwd2.value;
    if(pwd1Value!==pwd2Value){
        pwderror2.innerHTML="两次密码不一致";
        isPwd2Right=false;
    }else{
        pwderror2.innerHTML="两次密码一致";
        isPwd2Right=true;
    }
    checkAll();
}
//功能7：获得用户是同意注册协议
agreeCK.onclick = function(){
    isAgree=this.checked;
    checkAll();
};
//功能8：检测是否可以注册
function checkAll(){
    var isRight=isAgree&&isPhoneRight&&isYZMRight&&isPwd1Right&&isPwd2Right;

    if(isRight){
        submitBtn.removeAttribute("disabled");
        submitBtn.style.color ="red";
    }else{
        submitBtn.setAttribute("disabled","disabled");
        submitBtn.style.color ="";
    }
}
//功能：实现注册功能
submitBtn.onclick =function(){
    $.post("http://test.hfjava.com/shop/adduser", $("form").serialize(),
        function(data){
        if(data=="Saved"){
            alert("注册成功！");
        }
        }
        );
};
</script>
</body>
</html>